<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UniAppx 锚点定位效果</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #333;
      font-size: 14px;
      padding: 0;
    }

    .container {
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      position: relative;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    }

    /* 顶部导航 */
    .header {
      background: linear-gradient(135deg, #3498db, #2c3e50);
      color: white;
      padding: 20px 15px;
      display: flex;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    }

    .header h1 {
      font-size: 20px;
      font-weight: 600;
      flex: 1;
      text-align: center;
      letter-spacing: 1px;
    }

    /* 锚点导航栏 */
    .anchor-nav {
      display: flex;
      overflow-x: auto;
      background: #fff;
      padding: 12px 15px;
      position: sticky;
      top: 70px;
      z-index: 99;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      scrollbar-width: none;
      /* Firefox */
    }

    .anchor-nav::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari, Opera */
    }

    .nav-item {
      padding: 8px 18px;
      font-size: 14px;
      color: #666;
      background: #f5f5f5;
      border-radius: 20px;
      margin-right: 10px;
      white-space: nowrap;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .nav-item.active {
      background: linear-gradient(135deg, #3498db, #2c3e50);
      color: white;
      box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
      transform: translateY(-2px);
    }

    .nav-item:last-child {
      margin-right: 0;
    }

    /* 内容区域 */
    .content {
      padding: 20px 15px;
    }

    .section {
      margin-bottom: 30px;
      padding: 25px 20px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }

    .section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: linear-gradient(to bottom, #3498db, #2c3e50);
      border-radius: 5px 0 0 5px;
    }

    .section:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #2c3e50;
      display: flex;
      align-items: center;
    }

    .section-title i {
      margin-right: 10px;
      color: #3498db;
      background: #e1f0fa;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .section-content {
      font-size: 15px;
      line-height: 1.6;
      color: #555;
    }

    .section-content p {
      margin-bottom: 12px;
    }

    /* 产品展示 */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-top: 15px;
    }

    .product-card {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .product-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .product-img {
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #f5f7fa, #e4edf9);
    }

    .product-img i {
      font-size: 40px;
      color: #3498db;
    }

    .product-info {
      padding: 12px;
    }

    .product-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #333;
      height: 40px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .product-price {
      color: #e74c3c;
      font-weight: bold;
      font-size: 16px;
    }

    /* 底部操作栏 */
    .footer {
      display: flex;
      padding: 15px;
      background: #fff;
      border-top: 1px solid #eee;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
      position: sticky;
      bottom: 0;
      z-index: 99;
    }

    .footer-btn {
      flex: 1;
      padding: 14px;
      text-align: center;
      border-radius: 8px;
      font-weight: 500;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .back-btn {
      background: #f5f5f5;
      color: #666;
      margin-right: 12px;
    }

    .back-btn:hover {
      background: #e0e0e0;
    }

    .home-btn {
      background: linear-gradient(135deg, #3498db, #2c3e50);
      color: #fff;
      box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    }

    .home-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
    }

    /* 返回顶部按钮 */
    .back-to-top {
      position: fixed;
      bottom: 90px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #3498db, #2c3e50);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 98;
      opacity: 0;
      transform: translateY(20px);
    }

    .back-to-top.show {
      opacity: 1;
      transform: translateY(0);
    }

    .back-to-top:hover {
      transform: translateY(-5px) scale(1.05);
    }

    /* 响应式调整 */
    @media (max-width: 350px) {
      .nav-item {
        padding: 8px 14px;
        font-size: 13px;
      }

      .section {
        padding: 20px 15px;
      }

      .product-grid {
        grid-template-columns: 1fr;
      }
    }

    /* 动画效果 */
    @keyframes highlight {
      0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5);
      }

      70% {
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
      }
    }

    .highlight {
      animation: highlight 1.5s ease;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <!-- 顶部导航 -->
      <div class="header">
        <i class="fas fa-arrow-left" @click="goBack"></i>
        <h1>产品分类导航</h1>
        <i class="fas fa-search"></i>
      </div>

      <!-- 锚点导航栏 -->
      <div class="anchor-nav">
        <div v-for="(anchor, index) in anchors" :key="index" class="nav-item"
          :class="{ active: activeAnchor === index }" @click="scrollToAnchor(index)">
          {{ anchor.title }}
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <div v-for="(anchor, index) in anchors" :id="'section-' + index" :key="index" class="section"
          :class="{ highlight: activeAnchor === index && highlight }">
          <div class="section-title">
            <i :class="anchor.icon"></i>
            <span>{{ anchor.title }}</span>
          </div>
          <div class="section-content">
            <p>{{ anchor.description }}</p>

            <div class="product-grid" v-if="anchor.products">
              <div v-for="(product, pIndex) in anchor.products" :key="pIndex" class="product-card">
                <div class="product-img">
                  <i :class="product.icon"></i>
                </div>
                <div class="product-info">
                  <div class="product-name">{{ product.name }}</div>
                  <div class="product-price">¥{{ product.price }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 返回顶部按钮 -->
      <div class="back-to-top" :class="{ show: showBackToTop }" @click="scrollToTop">
        <i class="fas fa-arrow-up"></i>
      </div>

      <!-- 底部操作栏 -->
      <div class="footer">
        <div class="footer-btn back-btn" @click="goBack">
          <i class="fas fa-arrow-left"></i> 返回
        </div>
        <div class="footer-btn home-btn" @click="goHome">
          <i class="fas fa-home"></i> 首页
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        activeAnchor: 0,
        showBackToTop: false,
        highlight: false,
        anchors: [
          {
            title: '推荐商品',
            icon: 'fas fa-star',
            description: '精选热门商品，品质保证，性价比高，满足您的日常需求。这些商品经过严格筛选，确保质量和实用性。',
            products: [
              { name: '高端智能手机', icon: 'fas fa-mobile-alt', price: '3999' },
              { name: '无线蓝牙耳机', icon: 'fas fa-headphones', price: '599' }
            ]
          },
          {
            title: '手机数码',
            icon: 'fas fa-mobile-alt',
            description: '最新款智能手机、平板电脑及配件，提供卓越的移动体验。包括各种品牌旗舰机型，满足不同用户需求。',
            products: [
              { name: '旗舰智能手机', icon: 'fas fa-mobile-alt', price: '5999' },
              { name: '智能手表', icon: 'fas fa-clock', price: '1299' },
              { name: '平板电脑', icon: 'fas fa-tablet-alt', price: '3299' },
              { name: '数码相机', icon: 'fas fa-camera', price: '4599' }
            ]
          },
          {
            title: '电脑办公',
            icon: 'fas fa-laptop',
            description: '高性能笔记本电脑、台式机及办公设备，提升您的工作效率。专业设备适合各种办公场景，从家庭办公到企业级应用。',
            products: [
              { name: '轻薄笔记本', icon: 'fas fa-laptop', price: '5299' },
              { name: '游戏台式机', icon: 'fas fa-desktop', price: '8999' }
            ]
          },
          {
            title: '家用电器',
            icon: 'fas fa-tv',
            description: '智能家电、厨房电器、生活电器，让您的家居生活更舒适便捷。节能环保设计，智能控制，提升生活品质。',
            products: [
              { name: '4K智能电视', icon: 'fas fa-tv', price: '4299' },
              { name: '变频空调', icon: 'fas fa-wind', price: '3299' }
            ]
          },
          {
            title: '美妆护肤',
            icon: 'fas fa-paint-brush',
            description: '国际品牌化妆品、护肤品，呵护您的肌肤健康。精选天然成分，科学配方，适合各种肤质需求。',
            products: [
              { name: '护肤精华套装', icon: 'fas fa-spa', price: '899' },
              { name: '彩妆礼盒', icon: 'fas fa-palette', price: '699' }
            ]
          },
          {
            title: '服装鞋包',
            icon: 'fas fa-tshirt',
            description: '时尚服饰、鞋靴箱包，展现您的个性品味。精选优质面料，舒适耐穿，满足不同场合需求。',
            products: [
              { name: '休闲运动鞋', icon: 'fas fa-shoe-prints', price: '499' },
              { name: '时尚双肩包', icon: 'fas fa-briefcase', price: '399' }
            ]
          },
          {
            title: '食品生鲜',
            icon: 'fas fa-utensils',
            description: '新鲜食材、休闲零食、地方特产，满足您的味蕾享受。严格质检，保证食品安全，新鲜直达。',
            products: [
              { name: '有机蔬菜礼盒', icon: 'fas fa-carrot', price: '129' },
              { name: '进口水果篮', icon: 'fas fa-apple-alt', price: '199' }
            ]
          },
          {
            title: '图书音像',
            icon: 'fas fa-book',
            description: '畅销图书、教育音像、电子书资源，丰富您的精神世界。涵盖文学、科技、教育等多个领域。',
            products: [
              { name: '畅销小说套装', icon: 'fas fa-book-open', price: '299' },
              { name: '英语学习套装', icon: 'fas fa-globe', price: '399' }
            ]
          }
        ]
      },
      mounted() {
        // 监听滚动事件
        window.addEventListener('scroll', this.handleScroll);

        // 初始高亮效果
        this.highlightSection();
      },
      beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
      },
      methods: {
        // 滚动到指定锚点
        scrollToAnchor(index) {
          this.activeAnchor = index;
          this.highlight = true;

          const element = document.getElementById('section-' + index);
          if (element) {
            // 计算偏移量（减去导航栏高度）
            const headerHeight = document.querySelector('.header').offsetHeight;
            const navHeight = document.querySelector('.anchor-nav').offsetHeight;
            const offset = headerHeight + navHeight + 10;

            // 获取元素位置
            const elementPosition = element.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - offset;

            // 平滑滚动
            window.scrollTo({
              top: offsetPosition,
              behavior: 'smooth'
            });

            // 重置高亮效果
            setTimeout(() => {
              this.highlight = false;
            }, 1500);
          }
        },

        // 处理滚动事件
        handleScroll() {
          // 显示/隐藏返回顶部按钮
          this.showBackToTop = window.scrollY > 500;

          // 计算当前活动锚点
          this.calculateActiveAnchor();
        },

        // 计算当前活动锚点
        calculateActiveAnchor() {
          const headerHeight = document.querySelector('.header').offsetHeight;
          const navHeight = document.querySelector('.anchor-nav').offsetHeight;
          const offset = headerHeight + navHeight + 30;

          const sections = document.querySelectorAll('.section');
          let currentActive = 0;

          sections.forEach((section, index) => {
            const rect = section.getBoundingClientRect();
            // 当元素顶部进入视口时
            if (rect.top <= offset) {
              currentActive = index;
            }
          });

          this.activeAnchor = currentActive;
        },

        // 滚动到顶部
        scrollToTop() {
          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          });
        },

        // 返回上一页
        goBack() {
          console.log('返回上一页');
        },

        // 返回首页
        goHome() {
          console.log('返回首页');
        },

        // 高亮当前区域
        highlightSection() {
          setTimeout(() => {
            this.highlight = true;
            setTimeout(() => {
              this.highlight = false;
            }, 1500);
          }, 500);
        }
      }
    });
  </script>
</body>

</html>